บทที่4

Edit 0 3 …

กลับบทเรียน

บทที่ 4 : การสร้างตาราง


..:: การสร้างตาราง
จากบทความในบทที่ผ่าน ๆ มา ในเรื่องของการจัดตำแหน่งของข้อความ จะเห็นได้ว่าถึงแม้เราจะสามารถจัดตำแหน่งได้แล้ว แต่การจัดตำแหน่งนั้นก็ยังไม่สารมารถกำหนดเจาะจงได้ละเอียดนัก เพราะ สามารถระบุได้เฉพาะชิดซ้าย ชิดขวา และตรงกลางเท่านั้น ในบทความนี้เราจะมาจัดตำแหน่งของข้อความ โดยการใช้ตารางในการควบคุมตำแหน่งของข้อมูลที่เราต้องการแสดงผล
การสร้างตารางนั้น เราสามารถนำมาช่วยในการกำหนดตำแหน่งการแสดงผลของข้อมูลภายในเว็บเพจของเราได้ ว่าข้อมูลไหนต้องการแสดง ณ ตำแหน่งใดในเว็บเพจ โดยเราสามารถนำข้อมูลต่าง ๆ มาจัดแสดงในเซลล์ต่าง ๆ ของตารางได้ ทำให้สะดวกในการออกแบบการจัดว่างข้อมูล และทำให้การจัดว่างข้อมูลมีระเบียบเรียบร้อยอีกด้วย
ในการสร้างตารางนั้นจะมี Tag ต่าง ๆ ที่ใช้สำหรับสร้างตารางในภาษา html ดังนี้


1. การสร้างตาราง <table> </table>

2. การสร้างแถวภายในตาราง <tr> </tr>แท็กนี้ต้องอยู่ภายในแท็ก <table> </table>

3. การสร้างคอลัมน์ภายในแถวแต่ละแถว <td> </td>แท็กนี้ต้องอยู่ภายในแท็ก <tr> </tr>

external image arrow8.gif รูปแบบโครงสร้างของตาราง
<table>
<tr>
<td>...ข้อมูล....</td>
</tr>
</table>
จากโครงสร้างจะเป็นการสร้างตารางแบบง่ายที่สุดคือ การสร้างตาราแบบ 1 แถว และ 1 คอลัมน์

external image arrow8.gif ตัวอย่างการสร้างตารางแบบ 2 x 3 (2 แถว 3 คอลัมน์)
external image table.gif
<html>

<head><title> ....การสร้างตารางแบบ 2 x 3 (2 แถว 3 คอลัมน์)....</title></head>

<body>

<table>

<!--เริ่มต้นแถวที่ 1 ->

<tr>

<td>...ข้อมูล....</td>

<td>...ข้อมูล....</td>

<td>...ข้อมูล....</td>

</tr>

<!--เริ่มต้นแถวที่ 2 ->

<tr>

<td>...ข้อมูล....</td>

<td>...ข้อมูล....</td>

<td>...ข้อมูล....</td>

</tr>

</table>

</body>

</html>

จากตัวอย่างจะสักเกตได้ว่ามีแถว 2 แถว ซึ่งจะเขียนโค้ด html ได้โดยเขียนแท็ก <tr> </tr> 2 ชุด และในแถวแต่ละแถวมีคอลัมน์ 3 คอลัมน์ ดังนั้นเราก็สามารถเขียนโค้ดเืื่พื่อสร้างคอลัมน์ โดยเขียนแท็ก <td></td> ไว้ใน <tr> </tr> โดยใน 1 แถวมีคอลัมน์ 3 คอลัมน์ ดังนั้นเราจึงต้องเขียนแท็ก <td></td> 3 ชุดไว้ในแท็ก <tr> </tr> แต่ละชุด

สำหรับบทความนี้ก็ขอจบเีีพียงเท่านี้ก่อนนะค่ะ แต่เรื่องของการจัดการกับตารางยังไม่หมดเพียงแค่นี้ค่ะ เพราะเรายังสามารถปรับแต่งตารางได้อีกมากมายค่ะ ไม่ว่าจะเป็นการใส่สี การจัดตำแหน่งต่าง ๆ ติดตามรายละเอียดได้ในบทความตอนต่อไปค่ะ